import React from 'react'
// ===================================================================== Temp
import SearchForm from '#cpt/temp/SearchForm'
import Table from '#cpt/temp/Table'
import AddEditModal from '#cpt/temp/AddEditModal'
import TableControls from '#cpt/temp/TableControls'
import Controls from '#cpt/temp/Controls'
// ===================================================================== global declare
const { $fn, $Lazy } = window
// ===================================================================== Lazy
const Page 			= $Lazy.load(()=>import('#tp/page/page-container'))
const $cache 		= $Lazy.file(()=>import('#private/cache-api'))
// ===================================================================== component
class Index extends React.Component{
	state = {
		data:[],
		pag: {},
		// 搜索表单列表
		forms : [
			{ label: '字典编码',		name: 'item_code' },
			{ label: '字典名称',		name: 'item_name' },
			{ label: '所属分类',		name: 'dis_code', type: 'select',loading:true  },
		],
		// 提交表单列表
		formData : [
			{ label: '字典名称',		name: 'item_name', 	half:true, required:true, },
			{ label: '英文名称',		name: 'name_en', 	half:true },
			{ label: '所属分类',		name: 'dis_code', 	half:true,  required:true,	type: 'select', loading:true },
			{ label: '排序',			name: 'sort', 		half:true,	required:true,	type: 'number', value:0 },
			{ label: '描述',			name: 'remark', 	full:true, 	type:'textarea' },
		]
	}
	
	model = {}
	submit = { item_code:'' }
	
	componentDidMount(){
		const { dis_code } = $fn.query()
		if(dis_code){
			this.dis_code = dis_code
			this.query = { dis_code } 
		}
		
		this.fetch()
	}
	// 获取下拉数据
	getSelect = async () => {
		const { forms, formData } = this.state
		$cache.then( async f => {
			// 所属分类
			await f.getCache({ api:'dictionary' } ).then(data=>{
				$fn.setRows([ forms, formData ], 'dis_code', data )
				if(this.dis_code){
					this.searchFormRef.setValue({ dis_code: this.dis_code  })
				}
			})
			//
			this.setState({ forms })
		})
		
	}
	// paging
	fetch = () => $fn.fetch.call(this,'dis-item/index')
	
	// 表单
	cols = [
		{ title: '字典编码',		dataIndex: 'item_code', 	width:100 },
		{ title: '字典名称', 	dataIndex: 'item_name', 	width:150 },
		{ title: '英文名称', 	dataIndex: 'name_en', 		width:150 },
		{ title: '所属分类', 	dataIndex: 'dis_name', 		width:150 },
		{ title: '排序', 		dataIndex: 'sort', 			...$fn.table.num },
		{ title: '描述', 		dataIndex: 'remark', 		width:250 },
		TableControls.controls.call(this)
	]
	
	// 表格操作按钮
	table_controls = (text,{ id }) => [
		TableControls.edit.call(this, 'dis-item/info', { id }, { idx: ({ id, item_code }) => {
			this.submit = { item_code }
			return { id }
		} })				// 编辑
	]
	
	// 操作按钮
	controls = () => [
		Controls.add.call(this,{
			click:()=>{
				this.formRef.setValue({ dis_code:this.dis_code })
			}
		}),								// 添加
		Controls.imports.call(this, 'dis-item/import'),			// 导入
		// 下载导入模板
		Controls.importTemplate.call(this),
		this.dis_code && Controls.back.call(this)
	]
	
	render(){
		return (
			<>
				<Page title='数据字典' controls={this.controls()}>
					{/* 搜索 */}
					{ SearchForm.call(this, { onForm: this.getSelect }) }
					{/* 表格 */}
					{ Table.call(this, { idStr:'id' }) }
				</Page>
				{/* 添加、编辑 */}
				{ AddEditModal.call(this,{ api: 'dis-item/add', editApi:'dis-item/edit', onComplete:({ param })=>{
					$fn.dataRemove('dictionary/items-' + param['dis_code'] )
					// $fn.dataClear()
				} }) }
			</>
		)
	}
}

export default Index